const tbody = document.querySelector('tbody');

// 封装渲染页面
async function Score() {
    const result = await axios({
        url: "/score/list",

    })

    console.log(result);
    // 生成的html
    let html = '';

    for (const key in result.data.data) {
        const { name, score } = result.data.data[key]

        /*         console.log(key);
                console.log(result.data.data[key]); */

        html += `
        <tr>
        <th scope="row">${key}</th>
        <td>${name}</td>
        <td class="score" data-stu_id="${key}" data-batch="${1}">${score[0]}</td>
        <td class="score" data-stu_id="${key}" data-batch="${2}">${score[1]}</td>
        <td class="score" data-stu_id="${key}" data-batch="${3}">${score[2]}</td>
        <td class="score" data-stu_id="${key}" data-batch="${4}">${score[3]}</td>
        <td class="score" data-stu_id="${key}" data-batch="${5}">${score[4]}</td>
 
      </tr>
        `

    }
    tbody.innerHTML = html


}
Score()

// 
tbody.addEventListener('dblclick', function (e) {
    const target = e.target
    if (target.classList.contains('score')) {
        // console.log(123);
        // 创造一个input 标签
        const input = document.createElement('input')
        input.type = 'text';
        input.value = target.innerHTML;

        // 把创造的input 加入到点击的位置
        target.appendChild(input)

        // 给input 标签设置 获得焦点事件
        input.focus()

        // 失去焦点完成修改
        input.addEventListener('blur', async function (ev) {
            const { stu_id, batch } = target.dataset;
            const score = input.value;

            const result = await axios({
                url: "/score/entry",
                method: "post",
                data: {
                    stu_id,
                    batch,
                    score,
                }
            })
            if (result.data.code === 0) {
                toastr.success(result.data.message, '成功')
                Score()
            }

        })

        // 键盘抬起事件
        input.addEventListener('keyup', function (event) {
            // 按下回车 修改(同时调用失去焦点)
            if (event.key === 'Enter') {
                // 直接调用失去焦点的 操作
                input.blur()
            }

        })
    }

})

